<template>
    <div class="home-page">
        <site-header></site-header>
        <site-menus ref="menus"></site-menus>
        <div class="content">
            <div class="first">首页->
                <span v-if="rightShow==1">工作动态</span>
                <span v-if="rightShow==3">工作信息</span>
            </div>
            <div class="line"></div>
            <Row>
                <Col span="6">
                    <left-button :list="buttonList" @result="resultAction" ref="button"></left-button>
                </Col>
                <Col span="18">
                    <work-dynamics :isShow="rightShow==1" :list="list1"></work-dynamics>
                    <work-information :isShow="rightShow==3" :list="list4"></work-information>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>

import SiteMenus from '../home/compoments/site-menus/index'
import SiteHeader from '../home/compoments/site-header/index'
import LeftButton from '../complaints-report/components/left-button/index'
import { getArticleList } from '@/api/site'
import WorkDynamics from './components/work_dynamics/index'
import WorkInformation from './components/work_information/index'

export default {
  components: { WorkInformation, WorkDynamics, LeftButton, SiteHeader, SiteMenus },
  data () {
    return {
      rightShow: this.$route.params.id,
      buttonList: [
        {
          content: '政策法规',
          path: 'policy'
        },
        {
          content: '工作动态'
        },
        {
          content: '审查调查',
          path: 'examination'
        },
        {
          content: '工作信息'
        }
      ],
      list1: [],
      list4: []
    }
  },
  methods: {
    getList () {
      getArticleList().then(ret => {
        this.list1 = ret.data.data.list1
        this.list4 = ret.data.data.list4
      })
    },
    resultAction (id) {
      this.rightShow = id
    }
  },
  mounted () {
    this.getList()
    console.log(this.$route, '路由')
    this.$refs.button.changeColor = this.$route.params.id
    console.log('组件样式', this.$refs.button.changeColor)
  }
}
</script>

<style scoped lang="less">
    .home-page {
        height: 100%;
        overflow: scroll;
    }

    .content {
        height: 1100px;
        width: 94%;
        margin-left: 3%;
    }

    .first {
        font-size: 20px;
        color: black;
        font-weight: bolder;
        margin-left: 40px;
        height: 60px;
        line-height: 60px;
    }

    .line {
        height: 5px;
        background-color: #0166b6;
    }
</style>
